/**
 * 作者：zj
 * 优化时间：2024、07、31
 */
import { renderCallback } from "fnutools";
export function fixedInScreen({
  targetDomSelector,
  srollDomSelector,
  fiexdType,
  fiexdDistance,
}) {
  renderCallback(targetDomSelector, (targetDom_) => {
    console.warn("renderCallback6543", targetDom_);
    //获取容器dom、定位dom、需要被固定的dom
    let targetDom = targetDom_;
    let srollDom = document.querySelector(srollDomSelector);
    let fixedDom =
      targetDom.previousElementSibling || targetDom.nextElementSibling;
    if (!fixedDom) {
      return;
    }
    console.warn("targetDom6453", targetDom);
    console.warn("srollDom", srollDom);
    console.warn("fixedDom6453", fixedDom);
    //判断
    let fiexdToTop = fiexdType == "fiexdToTop" ? fiexdDistance : "";
    let fiexdToBottom = fiexdType == "fiexdToBottom" ? fiexdDistance : "";
    if (!fiexdToTop && !fiexdToBottom) {
      throw new Error("fiexdToTop、fiexdToBottom属性缺失");
    }
    //获取原元素的style
    let fixedDomTop = fixedDom.getBoundingClientRect().top;
    let targetDomTop = targetDom.getBoundingClientRect().top;
    let targetDomLeft = targetDom.getBoundingClientRect().left;
    let targetDomW = +window.getComputedStyle(targetDom).width.slice(0, -2); //targetDom.offsetWidth
    let targetDomH = +window.getComputedStyle(targetDom).height.slice(0, -2); //targetDom.offsetHeight
    let dispersion = fixedDomTop - targetDomTop;
    let targetDomBottom = window.innerHeight - targetDomTop - targetDomH;
    if (targetDomW == 0 || targetDomH == 0) {
      return;
    }
    // console.warn('dispersion',dispersion);

    //被复制元素赋予原元素的style
    let targetDoms = targetDom.cloneNode(true);
    targetDoms.setAttribute("beCopyDom", targetDomSelector.slice(1));
    targetDom.parentNode.insertBefore(targetDoms, targetDom.nextElementSibling);
    targetDom.style.position = "fixed";
    targetDom.style.zIndex = "2050";
    targetDom.style.width = targetDomW + "px";
    targetDom.style.height = targetDomH + "px";
    targetDom.style.top = targetDomTop + "px";
    targetDom.style.left = targetDomLeft + "px";
    targetDom.style.marginTop = 0 + "px"; //避免定位后的元素受到原来元素的margin影响
    targetDom.style.marginLeft = 0 + "px"; //避免定位后的元素受到原来元素的margin影响
    targetDom.style.marginBottom = 0 + "px"; //避免定位后的元素受到原来元素的margin影响
    targetDom.style.marginRight = 0 + "px"; //避免定位后的元素受到原来元素的margin影响
    targetDoms.style.visibility = "hidden";
    //判断元素起始位置，是否在范围内，不在的话，则定位到底线位置
    if (fiexdToTop) {
      if (targetDomTop <= fiexdToTop) {
        console.warn("最高线--过线");
        targetDom.style.top = fiexdToTop + "px";
      }
    }
    if (fiexdToBottom) {
      if (targetDomBottom <= fiexdToBottom) {
        console.warn("最低线--过线");
        targetDom.style.top = "initial";
        targetDom.style.bottom = fiexdToBottom + "px";
      }
    }
    //实现位置重置的核心事件
    let fn = () => {
      let fixedDomTop = fixedDom.getBoundingClientRect().top;
      let currentTop = fixedDomTop - dispersion;
      let currentBottom = window.innerHeight - currentTop - targetDomH; //距离底部真实的距离需要减去dom本身的高度
      if (fiexdToTop) {
        if (currentTop <= fiexdToTop) {
          currentTop = fiexdToTop;
        }
        targetDom.style.top = currentTop + "px";
      }
      if (fiexdToBottom) {
        if (currentBottom <= fiexdToBottom) {
          currentBottom = fiexdToBottom;
        }
        targetDom.style.top = "inherit";
        targetDom.style.bottom = currentBottom + "px";
      }
    };
    //重新计算 dispersion
    let fn2 = () => {
      console.warn("dispersion", dispersion);
      let targetDomOrigin = document.querySelector(
        `[becopydom=${targetDomSelector.slice(1)}]`
      );
      dispersion =
        fixedDom.getBoundingClientRect().top -
        targetDomOrigin.getBoundingClientRect().top;
      console.warn("dispersion==new", dispersion);
    };
    //容器元素添加scroll事件
    srollDom.addEventListener("scroll", fn);
    //容器元素监听width和height变化
    let MutationObserver =
      window.MutationObserver ||
      window.WebKitMutationObserver ||
      window.MozMutationObserver;
    let observer = new MutationObserver(fn);
    observer.observe(srollDom, {
      childList: true,
      subtree: true,
      attributes: true,
      characterData: true,
    });
    //被固定的元素监听width和height变化
    let MutationObserver2 =
      window.MutationObserver ||
      window.WebKitMutationObserver ||
      window.MozMutationObserver;
    let observer2 = new MutationObserver2(fn2);
    observer2.observe(fixedDom, {
      childList: true,
      subtree: true,
      attributes: true,
      characterData: true,
    });
  });
}
